<template>
  <div class="pagss">
    <div style="height: 20px;"></div>
    <Navvz></Navvz>
    <el-row>
      <el-col :span="24">
        <div class="panel-group1">
          <div class="row_a_c mb_20">
            <div class=" f_24 f_bold">子账号管理</div>
          </div>

          <el-form :model="queryParams" :rules="rules" ref="queryForm" label-width="100px" class="demo-ruleForm">
            <div class="row " style="margin-left: -16px;">

              <el-form-item class="itembox box2" label="用户名：">
                <el-input clearable v-model="queryParams.username" placeholder="请输入用户名"></el-input>
              </el-form-item>
              <el-button style="height: 36px;width: 86px;" class="bot" @click="handleQuery">查询</el-button>
              <el-button style="height: 36px;width: 86px;" @click="resetQuery">清空</el-button>
            </div>
          </el-form>

          <el-button class="mb_20 bot" @click="gdAdd">添加子账号</el-button>

          <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName" v-loading="loading">

            <el-table-column prop="username" label="用户名" align="center"></el-table-column>
            <el-table-column prop="nickname" label="昵称" align="center"></el-table-column>
            <el-table-column prop="mobile" label="手机号" align="center"></el-table-column>
            <el-table-column prop="created_at" label="创建时间" align="center"></el-table-column>

            <el-table-column label="操作" align="center" width="350px">
              <template slot-scope="scope">
                <el-button size="mini" type="primary" @click="handleUpdate(scope.row)">修改</el-button>
                <el-button size="mini" type="warning" @click="toUrl(scope.row,'/center/menuPerm')">菜单权限</el-button>
                <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                <el-button size="mini" type="success" @click="toUrl(scope.row,'/center/menuGame')">游戏权限</el-button>
              </template>
            </el-table-column>
          </el-table>


          <pagination v-show="total>0" :total="total" :page.sync="queryParams.noPage" :limit.sync="queryParams.pageSize" @pagination="getList" />


        </div>
      </el-col>
    </el-row>


    <el-dialog center :title="title" :visible.sync="open" width="38%" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px" label-position="left">

        <el-form-item label="用户名" prop="username" align="right">
          <el-input v-model="form.username" placeholder="请输入" clearable />
        </el-form-item>

        <el-form-item label="密码" prop="password" align="right">
          <el-input v-model="form.password" type="password" placeholder="请输入" clearable />
        </el-form-item>

        <el-form-item label="昵称" prop="nickname" align="right">
          <el-input v-model="form.nickname" placeholder="请输入" clearable />
        </el-form-item>

        <el-form-item label="手机号" prop="mobile" align="right">
          <el-input v-model="form.mobile" placeholder="请输入" clearable />
        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer center" v-if="!ulid">

        <div class="quxiao">
          <el-button style="width: 200px;height: 40px;margin-right: 30px;" @click="cancel">取消</el-button>
        </div>

        <el-button style="width: 200px;height: 40px;" type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog center title="修改子账号" :visible.sync="open_update" width="38%" append-to-body>
      <el-form ref="form_update" :model="form_update" :rules="rules_update" label-width="100px" label-position="left">
        <el-form-item label="昵称" prop="nickname" align="right">
          <el-input v-model="form_update.nickname" placeholder="请输入" clearable />
        </el-form-item>
        <!-- <el-form-item label="手机号" prop="mobile" align="right">
          <el-input v-model="form_update.mobile" placeholder="请输入" clearable />
        </el-form-item> -->
      </el-form>

      <div slot="footer" class="dialog-footer center" v-if="!ulid">

        <div class="quxiao">
          <el-button style="width: 200px;height: 40px;margin-right: 30px;" @click="cancel_update">取消</el-button>
        </div>

        <el-button style="width: 200px;height: 40px;" type="primary" @click="submitFormUpdate">确 定</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
  import Cookies from 'js-cookie'
  import Vue from 'vue';
  import Navvz from "@/components/Navvz";

  import * as Work from "@/api/operation/work";
  import * as SonUser from "@/api/system/son_user";

  import * as Auth from '@/utils/auth';
  export default {
    name: 'Index',
    components: {
      Navvz,


    },
    data() {
      return {
        // 总条数
        total: 0,
        title: '',
        ulid: '',
        userId: '',
        nickname: '',

        form: {},
        form_update: {
          username: '',
          mobile: '',
        },
        open: false,
        open_update: false,
        fileList: [],
        loading: false,
        phoFiles: [],


        // 查询参数
        queryParams: {
          page: 1,
          pageSize: 10,
          filter: {
            order_number: null,
            state: null,
            time: null,
          },

        },
        // 日期范围
        dateRange: [],
        tableData: [],



        rules_update: {
          nickname: [{
            required: true,
            message: '昵称不能为空',
            trigger: 'change'
          }],
          mobile: [{
            required: true,
            message: '电话不能为空',
            trigger: 'change'
          }, {
            pattern: /^1[3456789]\d{9}$/,
            message: '请输入正确的手机号码',
            trigger: 'blur'
          }],
        },


        // 表单校验
        rules: {
          username: [{
            required: true,
            message: "用户名不能为空",
            trigger: "blur"
          }],
          nickname: [{
            required: true,
            message: '昵称不能为空',
            trigger: 'change'
          }],
          mobile: [{
            required: true,
            message: '电话不能为空',
            trigger: 'change'
          }, {
            pattern: /^1[3456789]\d{9}$/,
            message: '请输入正确的手机号码',
            trigger: 'blur'
          }],
          password: [{
            required: true,
            message: '密码不能为空',
            trigger: 'change'
          }],
        },

      }
    },
    created() {

      // 读取缓存
      this.nickname = localStorage.getItem('username')
      this.userId = localStorage.getItem('user_id')
      this.getList();

    },

    mounted() {

    },
    methods: {
      toUrl(row, url) {
        console.log('row', row);
        this.$router.push({
          path: url,
          query: {
            user_id: row.id,
            pid: row.pid,
          }
        })
      },
      getList() {
        this.queryParams.pid = this.userId
        this.loading = true;
        SonUser.getList(this.queryParams).then(response => {
          this.tableData = response.data.rows;
          this.total = response.data.total;
          this.loading = false;
        });
      },

      /** 提交按钮 */
      submitForm: function() {
        this.$refs['form'].validate(valid => {
          if (valid) {
            this.form.pid = this.userId
            this.loading = true;
            SonUser.addSonUser(this.form).then(response => {
              this.$modal.msgSuccess('新增成功');
              this.open = false;
              this.loading = false;
              this.getList();
            });

          }
        });
      },

      /** 提交按钮 */
      submitFormUpdate: function() {
        this.$refs['form_update'].validate(valid => {
          if (valid) {

            this.loading = true;
            SonUser.update(this.form_update).then(response => {
              this.$modal.msgSuccess('修改成功');
              this.open_update = false;
              this.loading = false;
              this.getList();
            });

          }
        });
      },

      /** 删除按钮操作 */
      handleDelete(row) {
        var peres = {};
        peres.id = row.id

        this.$modal.confirm('是否确认删除').then(function() {
          return SonUser.destroy(peres);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {});
      },

      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        this.$set(this.form_update, 'nickname', row.nickname)
        this.$set(this.form_update, 'mobile', row.mobile)
        this.$set(this.form_update, 'id', row.id)
        this.ulid = row.ulid
        this.open_update = true;
      },

      /** 重置按钮操作 */
      resetQuery() {
        this.queryParams.number = null,
          this.handleQuery();
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.noPage = 1;
        this.getList();
      },

      // 表单重置
      reset() {
        this.fileList = [];
        this.phoFiles = [];
        this.form = {};
        this.form_update = {};
        this.resetForm("form");
        this.resetForm("form_update");
      },

      // 取消按钮
      cancel() {
        this.open = false;
      },

      cancel_update() {
        this.open_update = false;
        this.getList();
      },

      //添加合同 按钮
      gdAdd() {
        this.title = '添加子账号';
        this.form = {};
        this.ulid = '';
        this.open = true;
        this.reset()
      },

      tableRowClassName({
        row,
        rowIndex
      }) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },

    }
  }
</script>

<style lang="scss" scoped>
  .pagss {
    height: 100%;
    background: #E4EEF9;
    // padding: 5px 0 15px 40px;
  }

  .bot {
    background: #3FC1C9;
    color: #fff;
  }

  .panel-group1 {
    padding: 25px;
    margin-top: 18px;
    margin-bottom: 0px;
    margin-right: 15px;
    margin-left: 15px;
    min-height: 760px;
    background: #FFFFFF;
    border-radius: 10px 10px 10px 10px;
    opacity: 1;
  }

  .ddfbzy {
    width: 112px;
    height: 32px;
    background: #FFDBDB;
    border-radius: 4px;
  }

  .zzcl {
    width: 112px;
    height: 32px;
    background: #DBE2FF;
    border-radius: 4px;
  }

  .yhfk {
    width: 112px;
    height: 32px;
    color: #FFFFFF;
    background: #306EF2;
    border-radius: 4px;
  }

  .ywj {
    width: 112px;
    height: 32px;
    background: #E3E3E3;
    border-radius: 4px;
  }

  .itembox {
    margin-right: 45px;

  }

  ::v-deep .el-rate__icon {
    font-size: 38px;
  }
</style>
